<template>
  <div>
    <n-modal v-model:show="show">
      <n-card class="h-screen overflow-hidden">
        <div class="flex flex-col h-screen overflow-hidden ">
          <div class=" flex justify-end">
            <n-button secondary @click="doHide">
              <TextIcon tip="关闭" icon="mdi:close"></TextIcon>
            </n-button>
          </div>
          <n-divider></n-divider>
          <div class="flex-1 overflow-hidden">
            <n-scrollbar id="PreviewModal">
              <div class="flex container max-w-screen-lg mx-auto">
                <div class="max-w-[200px] px-3 sticky top-12 h-0 hidden sm:block">
                  目录：
                  <MdCatalog editorId="preview" scrollElement="#PreviewModal > div.n-scrollbar-container"
                             :theme=" theme as Themes"/>
                </div>
                <div class="flex-1 w-0">
                  <MdPreview editorId="preview" :modelValue="content" :theme=" theme as Themes"/>
                </div>
              </div>
            </n-scrollbar>
          </div>

        </div>
      </n-card>

    </n-modal>
  </div>

</template>
<script setup lang="ts">
import { ref} from 'vue';
import {MdPreview, MdCatalog, Themes} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import api from "@/api";
import TextIcon from "@/components/text/TextIcon.vue";
import {useAppStore} from "@/store/app";
import {storeToRefs} from "pinia";

const appStore = useAppStore()
const {theme} = storeToRefs(appStore)


const show = ref(false)
const content = ref('')
const doHide = () => {
  show.value = false
}
const doShow = (id: any) => {
  show.value = true
  getInfo(id)
}

const getInfo = (id: any) => {
  api.file.download({
    id: id
  }).then(res => {
    if (res.data.type === 'application/octet-stream') {
      let file = res.data
      const reader = new FileReader();
      reader.onload = () => {
        typeof reader.result === "string" ? content.value = reader.result : content.value = '';
      };
      reader.readAsText(file);
    }
  })
}


defineExpose({
  doShow
})
</script>

<style scoped>
:deep(.n-card__content:first-child) {
  padding: 5px 10px;
}
</style>

